<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    td,th{
      text-align: center;
      padding: 10px 10px;
    }
    table{
      width: 80%;
      border-collapse: collapse;
      margin: 0 auto;
    }
    table tr:nth-child(odd){background: #abeac8;}
    table tr:nth-child(even){background: #c9eaab;}

  </style>
</head>
<body>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>Female</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>28</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>David</td>
    <td>32</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>Emily</td>
    <td>27</td>
    <td>Female</td>
  </tr>
</table>
<script>
  // 获取所有的td
  let tds = document.querySelectorAll('td');
  tds.forEach(item =>{
    item.onclick = () => {
      // 点击后的操作
      item.style.background = '#36d';
      item.style.color = 'white';

      // 2 秒后恢复原来的颜色
      setTimeout(() => {
        item.style.background = '';
        item.style.color = '';
      }, 1000);
    };
  });
</script>
</body>
</html>